<template>
  <div class="unit" :class="status || isfirst?'statu':''">
    <!-- 编辑状态 -->
    <template v-if="(status || isfirst) || !data.name">
      <a-form :form="form" class="form" layout="horizontal" labelAlign="left" @submit="onSave">
        <a-form-item label="公司名称">
          <a-input
            style="width: 300px;"
            size="large"
            placeholder="请输入公司名称"
            v-decorator="['name', { 
              rules: [{ required: false, message: '请输入公司名称' }],
              initialValue: data.name
            }]"
          />
        </a-form-item>
        <a-form-item label="所属行业">
          <a-cascader
            style="width: 300px;"
            size="large"
            :options="JSON.parse(JSON.stringify(formatData(listTree))) || []"
            :fieldNames='fieldNames'
            :changeOnSelect="true"
            placeholder="请选择所属行业"
            v-decorator="['industry', { 
              rules: [{ required: false, message: '请选择所属行业' }],
              initialValue: industry
            }]"
          />
          <!-- <a-input
            style="width: 300px;"
            size="large"
            placeholder="请输入所属行业"
            v-decorator="['industry', { 
              rules: [{ required: true, message: '请输入所属行业' }],
              initialValue: data.industry
            }]"
          /> -->
        </a-form-item>
        <a-form-item label="职位名称">
          <a-input
            style="width: 300px;"
            size="large"
            placeholder="请输入职位名称"
            v-decorator="['position', { 
              rules: [{ required: false, message: '请输入职位名称' }],
              initialValue: data.position
            }]"
          />
        </a-form-item>
        <a-form-item label="工作时间">
          <a-month-picker
            style="width: 134px;"
            :allowClear="false"
            size="large"
            placeholder="开始时间"
            v-decorator="['minWork', { 
              rules: [{ required: false, message: '请选择开始时间' }],
              initialValue: data.minWork
            }]"
          />
          <!-- <a-input
            style="width: 110px;"
            size="large"
            placeholder="开始时间"
            v-decorator="['minWork', { 
              rules: [{ required: true, message: '请选择开始时间' }],
              initialValue: data.minWork
            }]"
          /> -->
          <div style="width: 32px;display: inline-block;text-align: center;">-</div>
          <a-month-picker
            style="width: 133px;"
            :allowClear="false"
            size="large"
            placeholder="结束时间"
            v-decorator="['maxWork', { 
              rules: [{ required: false, message: '请选择结束时间' }],
              initialValue: data.maxWork
            }]"
          />
          <!-- <a-input
            style="width: 110px;"
            size="large"
            placeholder="结束时间"
            v-decorator="['maxWork', { 
              rules: [{ required: true, message: '请选择结束时间' }],
              initialValue: data.maxWork
            }]"
          /> -->
        </a-form-item>
        <a-form-item label="工作描述">
          <a-textarea
            style="width: 300px;"
            size="large"
            placeholder="请输入工作描述"
            v-decorator="['explain', { 
              rules: [{ required: false, message: '请输入工作描述' }],
              initialValue: data.explain
            }]"
          />
        </a-form-item>
        <!-- 操作 -->
        <div class="operation">
          <div class="left">
            <a-button @click="status = false" size="large">取消</a-button>
            <a-button html-type="submit" size="large" type="primary">保存</a-button>
          </div>
          <div class="right">
            <a v-if="showRemove" href="javascript:;" @click="onRemove()">
              <img src="@/assets/image/icon-remove.png" alt="icon">
            </a>
          </div>
        </div>
      </a-form>
    </template>
    <!-- 详情状态 -->
    <template v-else>
      <div class="details">
        <h4>
          <span style="font-size:18px;margin-right:80px;">{{data.position}}</span>
          <span>{{data.minWork}}-{{data.maxWork}}</span>
        </h4>
        <div style="margin-top:24px;">
          <span style="margin-right:80px;">{{data.name}}</span>
          <span>{{data.tradeName}}</span>
        </div>
        <div style="margin: 24px 0 16px;">公司描述：</div>
        <div style="line-height:21px;">{{data.explain}}</div>
      </div>
      <!-- 编辑 -->
      <a v-if="showEdit" class="edit" href="javascript:;" @click="status = true">
        <img src="@/assets/image/icon-edit.png" alt="icon">
        <span>编辑</span>
      </a>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    // 是否显示编辑按钮
    showEdit: {
      type: Boolean,
      default: true
    },
    // 是否显示删除按钮
    showRemove: {
      type: Boolean,
      default: true
    },
    // 当前是否编辑状态
    EditStatus: {
      type: Boolean,
      default: false
    },
    // 初始数据
    jsonData: {
      type: Object,
      default: ()=>{}
    },
    // 是否是首次
    isfirst: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      form: this.$form.createForm(this, { name: 'formData' }),
      data: {},
      status:"",
      listTree: [], // 行业-树形列表
      // 级联选择字段修改
      fieldNames:{
        label: 'name', 
        value: 'code', 
        children: 'children'
      },
    }
  },
  methods: {
    // 格式化数据，递归将空的children置为undefined
    formatData(data) {
      const that = this
      data.forEach((element) => {
        if (element.children && element.children.length > 0) {
          that.formatData(element.children)
        } else {
          element.children = undefined
        }
      })
      return data
    },
    // 获取期望行业
    getlistTree(){
      this.$ajax({
        url:"/news/industry/list/tree"
      }).then((res)=>{
        if(res.code == 200){
          this.listTree = res.data;
        }
      })
    },
    // 保存
    onSave(e){
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(values)
          // let workExperiJson = {
          //   comName:values.name,       //"公司名称",
          //   postName:values.position,     //"岗位名称",
          //   trade:values.industry[values.industry.length-1],    //"所属行业",
          //   entryDate:values.minWork,    //"入职时间",
          //   quitDate:values.maxWork,         //"离职时间"
          //   workDesc:values.explain,         //"工作描述"
          // }
          // if(this.isfirst){
          //   this.$ajax({
          //     url:"/entrepreneurial/resumeinfo/save",
          //     method:"post",
          //     params:{
          //       workExperiJson:JSON.stringify(workExperiJson)
          //     }
          //   })
          // }else{
          //   this.$ajax({
          //     url:"/entrepreneurial/resumeinfo/update",
          //     method:"post",
          //     params:{
          //       resumeNo:"",
          //       workExperiJson:JSON.stringify(workExperiJson)
          //     }
          //   })
          // }
          this.$emit('save', values)
          // this.status = false
          // console.log(this.data)
        }
      })
    },
    // 删除
    onRemove(){
      this.$emit('remove', '触发了删除')
    }
  },
  created(){
    this.status = this.EditStatus;
    this.getlistTree();
    this.$set(this, 'data', this.jsonData)
  },
  watch: {
    jsonData(e){
      this.$set(this, 'data', e)
    }
  },
  computed:{
    industry(){
      if(this.data.industry){
        let arr = this.data.industry.split(',');
        return arr.splice(0,arr.length-1).reverse();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.unit{
  padding: 32px;
  border: 1px solid #eee;
  position: relative;
  transition: all 0.3s;
  &.statu{
    background-color: #f8f8f8;
    border-color: #f8f8f8 !important;
  }
  &:hover{
    border-color: @theme;
    .edit{
      opacity: 1;
    }
  }
  // 表单
  .form{
    /deep/.ant-form-item{
      display: flex;
      .ant-form-item-label{
        width: 126px;
        label{
          font-size: 16px;
        }
      }
    }
  }
  // 操作
  .operation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    button{
      margin-right: 16px;
      width: 100px;
    }
    img{
      height: 18px;
    }
  }
  // 编辑
  .edit{
    position: absolute;
    right: 16px;
    top: 16px;
    opacity: 0;
    transition: all 0.3s;
    img{
      height: 18px;
    }
    span{
      margin-left: 8px;
      color: #666;
      font-size: 13px;
    }
  }
}
</style>